<template>
  <div class="orderFrom orderFrom1" v-if="$route.name=='LockContent'">
    <span class="h4">{{ $t('menu.LockContent') }}</span>
    <span style="float:right;margin-top:-4px;">&emsp;<a-button class="font12" @click="handleReset">{{ $t('public.reset') }}</a-button></span>
    <span class="searItem">
      <a-icon type="search" class="search-ico"/>
      <a-input-search placeholder="请输入房号查询" v-model="roomNo" @search="onSearch">
        <a-button slot="enterButton" style="color:#1890FF;">{{ $t('public.search') }}</a-button>
      </a-input-search>
    </span>
  </div>
  <div v-else-if="$route.name=='LockHistory'">
    <a-form
      layout="inline"
      class="orderFrom">
      <a-form-item label="选择开门日期">
        <a-range-picker
          showTime
          v-model="kmsj"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>
      <a-form-item label="开门人身份">
        <a-select v-model="kmrsf" default-value="" placeholder="请选择" style="min-width:96px">
          <a-select-option value="">全部</a-select-option>
          <a-select-option v-for="(item, index) in DOOR_PERSON_STATUS" :key="index" :value="item.status">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="房间号">
        <a-input
          type="text"
          placeholder="请输入房间号"
          class="font12"
          v-model="fjh"
        >
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          class="primary_linear"
          @click="onHistorySearch">
          {{ $t('public.query') }}
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-button class="font12" @click="handleHistoryReset">{{ $t('public.reset') }}</a-button>
      </a-form-item>
    </a-form>
    <div style="height:24px;background-color:#F0F2F5;">&emsp;</div>
    <div class="h4 orderFrom">{{ $t('menu.LockHistory') }}</div>
  </div>
</template>

<script>
import { DOOR_PERSON_STATUS } from '@/config/enum'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'LockSearch',
  data () {
    return {
      DOOR_PERSON_STATUS // 开门人身份
    }
  },
  computed: {
    ...mapGetters([
      'lockParams', // 门锁列表
      'openRecordParams' // 门锁记录
    ]),
    roomNo: {
      get () {
        return this.lockParams.fh
      },
      set (value) {
        const params = {}
        params.fh = value
        this.setLockParams(params)
      }
    },
    kmrsf: {
      get () {
        return this.openRecordParams.kmrsf
      },
      set (value) {
        const params = {}
        params.kmrsf = value
        this.setOpenRecordParams(params)
      }
    },
    kmsj: {
      get () {
        return this.openRecordParams.kmsj
      },
      set (value) {
        const params = {}
        params.kmsj = value
        params.ksrq = value.length > 0 && value.kmsj[0].format('YYYY-MM-DD HH:mm:ss') || ''
        params.jsrq = value.length > 0 && value.kmsj[1].format('YYYY-MM-DD HH:mm:ss') || ''
        this.setOpenRecordParams(params)
      }
    },
    fjh: {
      get () {
        return this.openRecordParams.fjh
      },
      set (value) {
        const params = {}
        params.fjh = value
        this.setOpenRecordParams(params)
      }
    }
  },
  created () {
    // 是否跳转带参数
    const params = this.$route.params.fh
    if (params) {
      this.setOpenRecordParams({ fjh: params })
    }
  },
  methods: {
    ...mapMutations([
      'setLockParams',
      'setOpenRecordParams'
    ]),
    // 门锁列表
    onSearch (value) {
      const params = {}
      params.page = 1
      this.setLockParams(params)
      setTimeout(() => {
        this.$emit('search')
      }, 500)
    },
    // 门锁列表重置
    handleReset () {
      const params = {}
      params.page = 1
      params.fh = ''
      this.setLockParams(params)
      setTimeout(() => {
        this.$emit('search')
      }, 500)
    },
    // 开门记录
    onHistorySearch () {
      this.filterParam()
      setTimeout(() => {
        this.$emit('search')
      }, 500)
    },
    // 开锁记录重置
    handleHistoryReset () {
      this.resetParam() // 传替重置数据
      setTimeout(() => {
        this.$emit('search')
      }, 500)
    },
    // 开锁过滤传替参数
    filterParam () {
      const params = {}
      this.params.page = 1
      const kmsjLength = this.openRecordParams.kmsj.length
      params.ksrq = kmsjLength > 0 && this.openRecordParams.kmsj[0].format('YYYY-MM-DD HH:mm:ss') || ''
      params.jsrq = kmsjLength > 0 && this.openRecordParams.kmsj[1].format('YYYY-MM-DD HH:mm:ss') || ''
      this.setOpenRecordParams(params)
    },
    // 开锁记录重置传替参数
    resetParam () {
      const params = {}
      params.page = 1
      params.fjh = ''
      params.kmrsf = ''
      params.ksrq = ''
      params.jsrq = ''
      params.kmsj = []
      this.setOpenRecordParams(params)
    }
  }
}
</script>
<style lang="less" scoped>
orderFrom1{margin-bottom:24px;}
.orderFrom{
  padding:14px 16px ;
  .h4{color:#333333;font-size: 16px;font-weight: 500}
  .search-ico{position: absolute;top:10px;left:18px;z-index:2;color:#999999}
  .searItem{
    float:right;
    width:284px;
    position: relative;
    margin-top:-4px;
  }
  /deep/ .ant-input-search.ant-input-search-enter-button > .ant-input{
    padding-left:36px;
  }
  .font12{font-size:12px !important;}
  /deep/.ant-input-affix-wrapper .ant-input{
    font-size:12px !important;
  }
}
</style>
